<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-smooth
-->
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
        <!-- 引入 echarts.js -->
        <script type="text/javascript" src="echarts.min.js"></script>
<!--        <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>-->
    </head>
    <body style="height: 100%; margin: 0">
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="section-main" style="height: 100%"></div>
        <script type="text/javascript">
            var dom = document.getElementById("section-main");
            var myChart = echarts.init(dom);
            var data1 = [5, 20, 36, 10, 10, 20, 100];
            var data2 = [2, 10, 30, 5, 10, 20, 90];
            var chapterdata=['第一章', '第二章', '第三章', '第四章', '第五章', '第六章', '第七章'];
            // 指定图表的配置项和数据
            var option = {
                title: {
                    // text: 'ECharts 入门示例',
                },
                // color: ['#55acf3', '#283b56'],
                color: ['#55acf3', '#283b56','#CF7030'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#283b56',
                        }
                        
                    },
                    textStyle:{
                        align:'left',
                        fontSize: '20'
                    },
                    // position:['20%','30%']
                    confine:true,
                    
                },
                grid: {
                    top: '15%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    // containLabel: true
                },
                legend: {
                    data: ['总题量', '做过的题(主观加客观)','做对的客观题'],
                    // x : '66%',
                    // y : '15%',
                },
                
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        textStyle : {
                            color: '#000',
                            fontSize:'20'
                        }
                    }
                }],
                xAxis: [{
                    type: 'category',
                    scale: true,
                    min:0,//从0刻度开始
                    data: chapterdata,
                    axisLabel: {
                        textStyle : {
                            color: '#000',
                            fontSize:'30'
                        }
                    }
                }],
                series: [{
                    name: '总题量',
                    type: 'bar',
                    // barWidth: '60%',
                    stack: '总题量',
                    label: {
                        normal: {
                            // show: true,
                            position: 'insideRight'
                        }
                    },
                    data: data1
                }, {
                    name: '做过的题(主观加客观)',
                    type: 'bar',
                    stack: '总题量',
                    label: {
                        normal: {
                            // show: true,
                            position: 'insideRight'
                        }
                    },
                    data: data2
                }]
            };
            
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        </script>
    </body>
</html>
    
